<template>
  <div class="app-container">
    <vxe-grid
      id="xGrid"
      ref="xGrid"
      align="center"
      border
      :checkbox-config="{ labelField: 'id' }"
      :columns="tableColumn"
      :custom-config="{ storage: true }"
      :data="list"
      :export-config="{}"
      height="auto"
      :keep-source="true"
      :loading="loading"
      :print-config="printConfig"
      resizable
      row-id="serialno"
      :show-overflow="true"
      size="small"
      stripe
      :toolbar-config="tableToolbar"
    >
      <!--搜索-->
      <template #form>
        <search-board
          :form-config="searchFormConfig"
          @searchEvent="searchEvent"
          @searchResetEvent="searchResetEvent"
        />
      </template>
      <!--工具栏-->
      <template #toolbar_buttons>
        <vxe-button icon="vxe-icon-add" status="primary" @click="insertEvent()">
          添加
        </vxe-button>
        <vxe-button
          code="delete"
          icon="vxe-icon-delete"
          status="danger"
          @click="removeMultiEvent()"
        >
          删除
        </vxe-button>
      </template>
      <!--操作-->
      <template #operate="{ row }">
        <el-link
          class="mr12"
          icon="el-icon-edit"
          type="primary"
          @click="editRowEvent(row)"
        >
          编辑
        </el-link>
        <el-link
          class="mr12"
          icon="el-icon-delete"
          type="danger"
          @click="removeRowEvent(row)"
        >
          删除
        </el-link>
        <el-link
          icon="el-icon-document"
          type="success"
          @click="detailRowEvent(row)"
        >
          详情
        </el-link>
      </template>
      <!--分页-->
      <template #pager>
        <vxe-pager
          :current-page.sync="current_page"
          :layouts="[
            'Sizes',
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          :page-size.sync="per_page"
          :perfect="true"
          :total="total"
          @page-change="handlePageChange"
        />
      </template>
    </vxe-grid>
    <vxe-modal
      v-model="showEdit"
      destroy-on-close
      :loading="submitLoading"
      min-height="300"
      min-width="600"
      :position="position"
      resize
      :title="selectRow ? '编辑&保存' : '新增&保存'"
      width="800"
    >
      <template #default>
        <form-board :form-config="submitFormConfig" />
      </template>
    </vxe-modal>
  </div>
</template>

<script>
  import VXETable from 'vxe-table'
  import SearchBoard from '@/components/SearchBoard'
  import FormBoard from '@/components/FormBoard'
  import { getList } from '@/api/device'
  import { removeEmptyField } from '@/utils'
  import { validList, params } from '@/utils/constant'
  export default {
    components: {
      SearchBoard,
      FormBoard,
    },
    data() {
      return {
        showEdit: false,
        selectRow: null,
        submitLoading: false,
        position: { top: 120 },
        list: [],
        total: 0,
        current_page: 1,
        per_page: 10,
        loading: false,
        validList,
        params,
        tableColumn: [
          { type: 'checkbox', title: '全选', width: 120 },
          { type: 'seq', width: 50 },
          {
            field: 'serialno',
            title: '编号',
            sortable: true,
          },
          {
            field: 'name',
            title: '名称',
            sortable: true,
          },
          {
            field: 'product.name',
            title: '类型',
          },
          {
            field: 'valid',
            title: '状态',
          },
          { field: 'project.name', title: '所属项目', sortable: true },
          {
            field: 'operate',
            title: '操作',
            slots: { default: 'operate' },
            width: 200,
          },
        ],
        tableToolbar: {
          perfect: true,
          export: true,
          print: true,
          zoom: true,
          custom: true,
          slots: {
            buttons: 'toolbar_buttons',
          },
        },
        printConfig: {
          columns: [
            { field: 'serialno' },
            { field: 'name' },
            { field: 'valid' },
            { field: 'product.name' },
            { field: 'project.name' },
          ],
        },
        submitFormConfig: {
          data: {
            name: '',
            serialno: '',
            product_id: '',
            project_id: '',
            valid: '',
          },
          items: [
            {
              field: 'name',
              title: '名称',
              span: 12,
              className: 'wd200',
              itemRender: {
                name: '$input',
                props: { placeholder: '请输入设备名称', clearable: true },
              },
            },
            {
              field: 'serialno',
              title: '编号',
              span: 12,
              itemRender: {
                name: '$input',
                props: { placeholder: '请输入编号', clearable: true },
              },
            },
            {
              field: 'product_id',
              title: '类型',
              span: 12,
              itemRender: {
                name: '$input',
                props: { placeholder: '请输入类型' },
              },
            },
            {
              field: 'valid',
              title: '状态',
              span: 12,
              itemRender: {
                name: '$select',
                options: validList,
                props: {
                  placeholder: '请选择状态',
                  clearable: true,
                  filterable: true,
                },
              },
            },
            {
              span: 24,
              align: 'left',
              itemRender: {
                name: '$buttons',
                children: [
                  {
                    props: {
                      type: 'submit',
                      content: '搜索',
                      icon: 'vxe-icon-search',
                      status: 'primary',
                    },
                  },
                  {
                    props: {
                      type: 'reset',
                      content: '重置',
                      icon: 'el-icon-document',
                    },
                  },
                ],
              },
            },
          ],
          rules: {
            name: [
              { required: true, message: '请输入名称' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符' },
            ],
          },
        },
        searchFormConfig: {
          data: {
            name: '',
            serialno: '',
            product_id: '',
            project_id: '',
            valid: '',
          },
          items: [
            {
              field: 'project_id',
              title: '项目',
              span: 4,
              itemRender: {
                name: '$select',
                options: [
                  { label: '耀峰未来', value: 1 },
                  { label: '中农智冠', value: 2 },
                ],
                props: {
                  placeholder: '请选择项目',
                  clearable: true,
                  filterable: true,
                },
              },
            },
            {
              field: 'product_id',
              title: '类型',
              span: 4,
              itemRender: {
                name: '$input',
                props: { placeholder: '请输入类型' },
              },
            },
            {
              field: 'serialno',
              title: '编号',
              span: 4,
              itemRender: {
                name: '$input',
                props: { placeholder: '请输入编号', clearable: true },
              },
            },
            {
              field: 'valid',
              title: '状态',
              span: 4,
              itemRender: {
                name: '$select',
                options: validList,
                props: {
                  placeholder: '请选择状态',
                  clearable: true,
                  filterable: true,
                },
              },
            },
            {
              span: 6,
              align: 'left',
              collapseNode: true,
              itemRender: {
                name: '$buttons',
                children: [
                  {
                    props: {
                      type: 'submit',
                      content: '提交',
                      icon: 'vxe-icon-document',
                      status: 'primary',
                    },
                  },
                  {
                    props: {
                      type: 'reset',
                      content: '重置',
                      icon: 'el-icon-document',
                    },
                  },
                ],
              },
            },
            {
              field: 'name',
              title: '名称',
              span: 4,
              folding: true,
              itemRender: {
                name: '$input',
                className: 'wd200',
                props: { placeholder: '请输入设备名称', clearable: true },
              },
            },
          ],
        },
      }
    },
    created() {
      this.getList()
    },
    methods: {
      async getList() {
        this.loading = true
        const {
          data: { data, total, per_page, current_page },
        } = await getList(this.params)
        this.list = data
        this.total = total
        this.per_page = per_page
        this.current_page = current_page
        this.loading = false
      },
      handlePageChange({ currentPage, pageSize }) {
        this.params.page = currentPage
        this.params.pagesize = pageSize
        this.getList()
      },
      insertEvent() {
        this.submitFormConfig.data = {
          name: '',
          serialno: '',
          product_id: '',
          project_id: '',
          valid: '',
        }
        this.showEdit = true
      },
      editRowEvent(row) {
        this.submitFormConfig.data = row
        this.showEdit = true
      },
      detailRowEvent(row) {
        console.log(row)
      },
      async removeRowEvent(row) {
        const type = await VXETable.modal.confirm('您确定要删除该数据?')
        const $grid = this.$refs.xGrid
        if (type === 'confirm') {
          $grid.remove(row)
        }
      },
      async removeMultiEvent() {
        const $table = this.$refs.xGrid
        if ($table) {
          const checkedRecords = $table.getCheckboxRecords()
          if (checkedRecords.length === 0) {
            VXETable.modal.message({
              content: '未选中任何数据',
              status: 'error',
            })
          } else {
            const type = await VXETable.modal.confirm('您确定要删除该数据?')
            const $grid = this.$refs.xGrid
            if (type === 'confirm') {
              $grid.remove(checkedRecords)
            }
          }
        }
      },
      searchEvent(queryParams) {
        this.params = { ...params, ...removeEmptyField(queryParams) }
        console.log(this.params)
        this.getList()
      },
      searchResetEvent() {
        this.params = params
        this.getList()
      },
    },
  }
</script>

<style lang="scss" scoped></style>
